<template>
	<view>
		<view class="view-wapper">
			<u-navbar :title="title" safeAreaInsetTop fixed @rightClick="rightClick" @leftClick="leftClick">
			</u-navbar>
		</view>

		<view class="title">
			<view @click="click(1)" :class="{'stateStyle1': style == 1}">默认</view>
			<view @click="click(2)" :class="{'stateStyle1': style == 2}">价格</view>
			<view @click="click(3)" :class="{'stateStyle1': style == 3}">筛选</view>
		</view>

		<u-popup :show="show" mode="right" @close="close" @open="open">
			<view class="popup-box">
				<view style="height: 120rpx; background-color: #FFF;"></view>
				<view class="price-box">
					<view class="price-title">价格区间</view>
					<view class="price">
						<view class="low">最低价格</view>
						<view class="zhi"></view>
						<view class="tall">最高价格</view>
					</view>
				</view>

				<view class="brand-box">
					<view class="brand-title">品牌</view>
					<view class="brand">
						<view class="item" v-for="i in 9">桥防</view>
					</view>
				</view>

				<view class="brand-box">
					<view class="brand-title">分类</view>
					<view class="brand">
						<view class="item" v-for="i in 9">桥防</view>
					</view>
				</view>

				<view class="peisong-box">
					<view class="ps-title">
						<text class="text">配送至</text>
						<view class="right">
							<image class="img-1" src="../../static/dizhi.png" mode=""></image>
							<text>北京市</text>
							<image class="img-2" src="../../static/xia.png" mode=""></image>
						</view>
					</view>
					<view class="btn">
						<view class="reset">重置</view>
						<view class="confirm">确定</view>
					</view>
				</view>
			</view>
		</u-popup>

		<view style="height: 30rpx;background-color: #f1f1f1;"></view>

		<view class="product-list">
			<view class="view-list-content">
				<view class="view-list-item" v-for="(item,index) in 11" :key="index">
					<image src="../../static/runhua.png" mode=""></image>
					<view class="view-info">
						<view class="view-name">得力(deli)家用工具箱套装电工木工维修工具箱套装</view>
						<view class="view-price">
							<view class="text-price"> <text>￥22</text> <text>.5/台</text> </view>
							<image src="../../static/jiahao.png" mode=""></image>
						</view>
						<view class="guige">6个规格</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				style: 1,
				id: '',
				show: false
			};
		},
		onShow() {

		},
		onLoad(option) {
			this.title = option.name
			this.id = option.id
		},
		methods: {
			leftClick() {
				uni.navigateBack({})
			},
			click(e) {
				this.style = e
				if (e == 3) {
					this.show = true
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.view-wapper {
		width: 100%;
		height: 98rpx;
	}

	.title {
		// background-color: darkcyan;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		border-bottom: 1rpx solid #f8f8f8;

		view {
			margin-top: 40rpx;
			width: 100rpx;
			font-size: 28rpx;
		}

		.stateStyle1 {
			font-size: 30rpx;
			color: #1D2DA7;
		}
	}

	.popup-box {
		width: 656rpx;
		background-color: #f8f8f8;

		.price-box {
			width: 100%;
			background-color: #FFF;
			margin-bottom: 30rpx;

			.price-title {
				// margin: 20rpx 0 0 20rpx;
				padding: 20rpx 0 0 20rpx;
				margin-bottom: 30rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.price {
				padding: 0 0 30rpx 0;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				justify-content: center;
				justify-content: space-between;
				justify-content: space-around;

				.low {
					width: 260rpx;
					height: 58rpx;
					background-color: #f8f8f8;
					text-align: center;
					line-height: 58rpx;
					font-size: 26rpx;
					color: #666;
				}

				.zhi {
					width: 53rpx;
					height: 3rpx;
					background-color: #222;
					position: relative;
					top: 27rpx;
				}

				.tall {
					width: 260rpx;
					height: 58rpx;
					background-color: #f8f8f8;
					text-align: center;
					line-height: 58rpx;
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.brand-box {
			width: 100%;
			background-color: #FFF;
			margin-bottom: 30rpx;

			.brand-title {
				padding: 20rpx 0 0 20rpx;
				margin-bottom: 30rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.brand {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				justify-content: center;
				justify-content: space-between;
				justify-content: space-around;

				.item {
					width: 194rpx;
					height: 58rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 58rpx;
					background-color: #f8f8f8;
					margin-bottom: 30rpx;
				}
			}
		}
		
		.peisong-box {
			background-color: #FFF;
			.ps-title {
				position: relative;
				top: 20rpx;
				.text {
					font-size: 32rpx;
					font-weight: bold;
					display: inline-block;
					margin-left: 20rpx;
				}
				
				.right {
					float: right;
					
					text{
						position: relative;
						right: 50rpx;
					}
					
					.img-1 {
						width: 30rpx;
						height: 30rpx;
						position: relative;
						right: 58rpx;
						top: 5rpx;
					}
					
					.img-2 {
						width: 16rpx;
						height: 16rpx;
						position: relative;
						right: 30rpx;
					}
				}
			}
			
			.btn {
				position: relative;
				top: 80rpx;
				
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				justify-content: center;
				justify-content: space-between;
				justify-content: space-around;
				
				view {
					width: 240rpx;
					height: 76rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 76rpx;
				}
				
				.reset {
					border: 1rpx solid #222;
				}
				
				.confirm {
					background-image: linear-gradient(#1D2DA7,#5F72FD);
					color: #FFF;
				}
			}
		}
	}

	.product-list {
		width: 95%;
		background-color: #f7f7f7;
		padding: 0 20rpx;

		.view-list-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.view-list-item {
				border-radius: 20rpx;
				background: #FFF;
				width: 336rpx;
				height: 560rpx;
				flex-shrink: 1;
				margin-bottom: 30rpx;

				.view-img {
					width: 336rpx;
					height: 336rpx;
					overflow: hidden;
				}

				image {
					width: 330rpx;
					height: 330rpx;
					border-radius: 10rpx;
				}

				.view-info {
					padding: 20rpx;

					.view-name {
						width: 100%;
						height: 80rpx;
						font-size: 28rpx;
						font-weight: 500;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.view-num {
						width: 120rpx;
						height: 30rpx;
						background: rgba(74, 154, 255, 0.05);
						border: 1px solid #4A9AFF;
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: #4A9AFF;
						line-height: 30rpx;
						text-align: center;
						margin: 20rpx 0rpx;
					}

					.view-price {
						display: flex;
						font-weight: bold;
						justify-content: space-between;
						align-items: flex-end;
						margin-top: 10rpx;

						.text-price {
							text {
								&:nth-child(1) {
									color: #E50014;
									font-weight: bold;
									font-size: 32rpx;
								}

								&:nth-child(2) {
									color: #E50014;
									// font-weight: bold;
									font-size: 26rpx;
								}
							}
						}

						image {
							width: 32rpx;
							height: 32rpx;
							// margin-bottom: 10rpx;
						}
					}

					.guige {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>
